<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        ._type>div>div {
            float: left;
            padding: 40px 15px;
        }

        .mulu {
            display: inline-block;
            color: darkgray;
            cursor: pointer;
            padding: 10px 30px;
            font-size: 14px;
        }

        body {
            text-align: center;

        }

        .shenghuo {
            text-align: left;
            padding-left: 10px;
        }

        p {
            font-size: 22px;
        }

        /* 2 因为首页是最新  所以要隐藏后面的两个。 */
        ._hot,
        ._type {
            display: none;
        }

        /* 3 这一步是他们三个的大小 ， 为了方便观察。 */
        ._new,
        ._hot,
        ._type {
            width: 1000px;
            min-height: 800px;
            background-color: wheat;
            margin: 20px auto;
        }

        .big {
            width: 970px;
            height: 100px;
            border-top: 1px dashed darkgrey;

        }

        .big>div>div {
            padding: 10px 20px;
        }

        .mulu.active {
            color: orange;
            border-bottom: 2px solid darkgrey;
        }

        .yi,
        .er,
        .san,
        .si,
        .wu,
        .liu {
            float: left;
        }

        /* 4 我们要点他们进行切换  所以要绑定事件 */
    </style>
</head>

<body>
    <p>发现酷玩</p>
    <span class="mulu active" content1="_new">最新</span>
    <span class="mulu" content1="_hot">最热</span>
    <span class="mulu" content1="_type">品类</span>
    <div class="_new">最新
        <div>dkjasdhakjhdsakdh</div>
    </div>
    <div class="_hot">最热</div>
    <div class="_type">
        <div>
            <p class="shenghuo">生活</p>
            <div>
                <img src="./cat_2.png" alt="">
                <p>空气净化器(21)</p>
            </div>
            <div>
                <img src="./cat_3.png" alt="">
                <p>吸尘器(21)</p>
            </div>
            <div>
                <img src="./cat_4.png" alt="">
                <p>扫地机器人(21)</p>
            </div>
            <div>
                <img src="./cat_5.png" alt="">
                <p>电风扇(21)</p>
            </div>
            <div>
                <img src="./cat_6png" alt="">

            </div>
            <div>
                <img src="./cat_7.png" alt="">
                <p>热水壶(21)</p>
            </div>
            <div>
                <img src="./cat_8.png" alt="">
                <p>电饭煲(21)</p>
            </div>
            <div>
                <img src="./cat_9.png" alt="">
                <p>咖啡机(21)</p>
            </div>
            <div>
                <img src="./cat_10.png" alt="">
                <p>原汁机(21)</p>
            </div>
            <div class="big">
                <div class="yi">
                    <div>扫地机器人(21)</div>
                    <div>扫地机器人(21)</div>
                    <div>扫地机器人(21)</div>
                </div>
                <div class="er">
                    <div>扫地机器人(21)</div>
                    <div>扫地机器人(21)</div>
                    <div>扫地机器人(21)</div>
                </div>
                <div class="san">
                    <div>扫地机器人(21)</div>
                    <div>扫地机器人(21)</div>
                    <div>扫地机器人(21)</div>
                </div>
                <div class="si">
                    <div>扫地机器人(21)</div>
                    <div>扫地机器人(21)</div>
                    <div>扫地机器人(21)</div>
                </div>
                <div class="wu">
                    <div>扫地机器人(21)</div>
                    <div>扫地机器人(21)</div>
    
                </div>
                <div class="liu">
                    <div>扫地机器人(21)</div>
                    <div>扫地机器人(21)</div>
               
                </div>
            </div>
        </div>
    </div>

    <!-- 1 引入jq -->
    <script src="./jquery.min.js"></script>
    <script>

        $(function () {
            // 1添加按钮事件
            var mulu_1 = $('.mulu');
            // 接下来就是写内容 div 还有他们的切换
            var div1 = $('._new');
            var div2 = $('._hot');
            var div3 = $('._type');
            $.each(mulu_1, function (index, el) {
                // console.log(el);
                $(el).click(function () {
                    // 2点击事件
                    // 3先清空所有的class activ 然后给当前点击的active（元素）
                    $('.mulu.active').removeClass('active');
                    $(this).addClass('active');
                    // 4 上面是切换的主题 下一步是内容的切换 3个大div显示隐藏
                    // console.log($(this).attr('content1'))
                    var content1 = $(this).attr('content1')
                    // 5 发请求获取对应的数据   请求地址的判断
                    if (content1 === '_type') {
                        div1.hide();
                        div2.hide();
                        div3.show();
                        // 6 调取数据  
                        // 传参
                        getData('play/category')
                    } else if (content1 === '_hot') {
                        // 显示的是最热 获取的也是最热的数据
                        div1.hide();
                        div2.show();
                        div3.hide();
                        getData('play/hot')

                    } else if (content1 === '_new') {
                        // 最新
                        div1.show();
                        div2.hide();
                        div3.hide();
                        getData('play/new')

                    }
                })
            })
            function getData(url) {
                //    7  第一次拿到数据后  存入本地  再次调用这个函数
                // 8 localStorage.setItem() if 无数据 那么发 ajax请求
                $.ajax({
                    url: 'http://localhost:3000/' + url,
                    success(res) {
                        console.log(res);
                        // localStorage.setItem(最新)
                        // 9  准备一个空字符串  用来存储div中的内容
                        var strTem = ''
                        for (var i = 0; i < 6; i++) {
                            strTem += "<div>" +
                                "<p>" + res[i].mulu + "</p>" +
                                "<div>" +
                                "<div>" +
                                "<img src=./cat_" + (i + 1) + ".png>" +
                                "<div>空气净化器(21)</div>" +
                                "</div>" +
                                "</div>" +
                                "<div>" +
                                "<div>空气净化器</div>" +
                                "</div>" +
                                "</div>"
                        }
                        // div3.html(strTem);
                    }
                })
            }
        })
    </script>
</body>

</html>